<!--巡检任务  -->
<template>
	<border cardTitle="随访任务" class="maxTop">
		<Chart :optionData="option_column" style="height: 95%"></Chart>
	</border>
</template>

<script>
	import border from '../../border.vue';
	import StatisticsMixins from '../../../StatisticsMixins';
	let color = ['#2467ED', '#16E4CF', '#EBA62C'];
	import {
		bigScreenApi
	} from '@/api/index';
	import * as echarts from 'echarts';

	export default {
		components: {
			border
		},
		mixins: [StatisticsMixins],
		data() {
			return {
				option_column: {
					legend: {},
					tooltip: {},
					// 颜色
					color: ['#4C93A2', '#FFDA44', '#2CD9C5'],
					series: [{
						type: 'pie',
						radius: [0, '60%'],
						label: {
							//echarts饼图内部显示百分比设置
							//  show: true,
							position: 'inside', //outside 外部显示  inside 内部显示
							formatter: `{d}%`, // 显示百分比
							color: '#ffffff', //颜色
							fontSize: 13 //字体大小
						},
						data: []
					}]
				}
			};
		},
		props: {
			level: {
				type: [String, Number],
				default: 0
			},
			areaList: {
				type: [Array],
				default: () => []
			},
			cityId: {
				type: [String, Number],
				default: ''
			}
		},
		watch: {
			level: {
				handler(newV, oldV) {
					this.getInfo();
				},
				immediate: true
			}
		},
		methods: {
			getInfo() {
				let cowData = {
					completeNum: 10,
					expireNum: 1,
					waitNum: 20
				};
				let data = [{
						value: cowData.completeNum,
						name: '已随访',
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									// 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
									// 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
									offset: 0,
									color: '#29cb8f'
								},
								{
									offset: 1,
									color: '#35c9c7'
								}
							])
						}
					},
					{
						value: cowData.expireNum,
						name: '已过期',
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									// 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
									// 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
									offset: 0,
									color: '#FD9044'
								},
								{
									offset: 1,
									color: '#FEE266'
								}
							])
						}
					},
					{
						value: cowData.waitNum,
						name: '待随访',
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									// 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
									// 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
									offset: 0,
									color: '#6A50EC'
								},
								{
									offset: 1,
									color: '#6BB8FF'
								}
							])
						}
					}
				];
				let legend = {
					bottom: 0,
					left: 'center',
					itemWidth: 14,
					itemHeight: 14,
					textStyle: {
						fontSize: 12,
						color: '#fff'
					},
					itemGap: 10, // 图列项之间的间距
					formatter: function(value) {
						var res = '';
						for (var i = 0; i < data.length; i++) {
							if (data[i].name == value) {
								res = data[i].name + '  ' + data[i].value;
							}
						}
						if (!res) {
							res = value;
						}
						return res;
					}
				};
				this.option_column.series[0].data = data;
				this.option_column.legend = legend;

				// this.$postAction(bigScreenApi.findMapInspectionCount, {
				// 	xzqhbm: this.level > 1 ? this.cityId : '',
				// 	level: this.level
				// }).then(res => {
				// 	if (res && res.code == 1) {

				// });
			}
		}
	};
</script>

<style>
	.maxTop {
		/* z-index: 99; */
	}
</style>